import React, { useRef, useState, useEffect } from "react";
import { Canvas } from "@react-three/fiber";
//useLoader 用于加载资源，这里用于加载 GLTF 模型；useFrame 用于在每一帧渲染时执行回调函数，可用于更新动画等。
import { useLoader, useFrame } from "@react-three/fiber";
//Three.js 提供的加载器，用于加载 GLTF 格式的 3D 模型。
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
//AnimationMixer、AnimationClip 和 AmbientLight：Three.js 中的类，AnimationMixer 用于混合和播放动画；AnimationClip 表示一个动画片段；AmbientLight 是环境光，用于照亮整个场景。
import { AnimationMixer, AnimationClip, AmbientLight } from "three";
//视角控制
import { OrbitControls } from "@react-three/drei";

// 为 AnimatedModel 组件的 props 添加类型
interface AnimatedModelProps {
    modelPath: string;
    scale?: [number, number, number]; // 添加可选的 scale 属性
    position?: [number, number, number]; // 添加可选的 scale 属性
}

const AnimatedModel: React.FC<AnimatedModelProps> = ({
    modelPath,
    scale = [1, 1, 1],
    position = [0, 0, 0],
}) => {
    // 加载 GLTF 模型及动画数据
    const gltf = useLoader(GLTFLoader, modelPath);
    // 使用 useRef 存储 AnimationMixer
    const mixer = useRef<AnimationMixer>(new AnimationMixer(gltf.scene));
    // 使用 useState 存储动画数据
    const [animations] = useState<AnimationClip[]>(gltf.animations);
    // 灯光 环境光
    const light = new AmbientLight(0x000000, 1);
    gltf.scene.add(light);
    // 使用 useEffect 设置动画播放
    useEffect(() => {
        if (animations && animations.length > 0) {
            animations.forEach((cilp) => {
                mixer.current.clipAction(cilp).play();
            });
        }
    }, [animations]);

    // 在每一帧更新动画
    useFrame((state, delta) => mixer.current.update(delta));

    // 设置模型的缩放
    gltf.scene.scale.set(...scale);
    gltf.scene.position.set(...position);
    return <primitive object={gltf.scene} />;
};

const GLBViewer: React.FC = () => {
    return (
        <>
            <Canvas>
                <ambientLight />
                <directionalLight position={[0, -3, 0]} />
                {/* 设置人物模型的缩放比例，例如：[0.5, 0.5, 0.5] */}
                {/* 使用 AnimatedModel 组件加载模型，并设置缩放比例 */}
                <AnimatedModel
                    modelPath="http://localhost:5173/models/小帅帅.glb"
                    position={[-0.5, -3, 0.5]}
                    scale={[3, 3, 3]}
                />
                {/* 控制视角 */}
                <OrbitControls />
            </Canvas>
        </>
    );
};

export default GLBViewer;